import React from 'react'
import styles from './style.module.css'
import food1 from "../../../assets/products/foot1.jpg";
import food2 from "../../../assets/products/food2.jpg";
import Nav from '../../../components/nav'

const collectList = [
    {
        image: food1,
        title: '福气杯',
        price: 100.20,
        sale: 20
    },
    {
        image: food2,
        title: '龙泉陶瓷杯',
        price: 20.20,
        sale: 100
    },
];

const ChunkProduct = ({imageSrc, title, price, sale}) => {
    return (

        <div style={{
            background: 'rgba(255,255,255,1)',
            borderRadius: '8px',
            boxShadow: '0px 2px 12px 0px rgba(0,0,0,0.1)',
            margin: '0 5px',
        }}>
            <img src={imageSrc} alt={"product1"} style={{width: '100%', borderRadius: '8px 8px 0 0'}}/>
            <div style={{padding: '0 5px 5px 5px'}}>
                <div style={{fontSize: '18px', fontWeight: 800, margin: '10px 0'}}>{title}</div>
                <div style={{fontSize: '16px', fontWeight: 800, margin: '5px 0'}}>¥{price}</div>
                <div>已售 {sale} <i className={"iconfont icon-shopping-fill"}/></div>
            </div>
        </div>
    );
};


function Index() {
    return (
        <div className={styles.container}>
            <Nav title={"我的收藏"}/>
            <div className={styles.content}>
                {
                    collectList.map((item, inx) => {
                        return (
                            <ChunkProduct imageSrc={item.image} title={item.title} price={item.price} key={inx}
                                          sale={item.sale}/>
                        );
                    })
                }
            </div>
            <div className={styles.content}>
                {
                    collectList.map((item, inx) => {
                        return (
                            <ChunkProduct imageSrc={item.image} title={item.title} price={item.price} key={inx}
                                          sale={item.sale}/>
                        );
                    })
                }
            </div>
            <div className={styles.content}>
                {
                    collectList.map((item, inx) => {
                        return (
                            <ChunkProduct imageSrc={item.image} title={item.title} price={item.price} key={inx}
                                          sale={item.sale}/>
                        );
                    })
                }
            </div>
            <div className={styles.content}>
                {
                    collectList.map((item, inx) => {
                        return (
                            <ChunkProduct imageSrc={item.image} title={item.title} price={item.price} key={inx}
                                          sale={item.sale}/>
                        );
                    })
                }
            </div>
        </div>
    );
}

export default Index
